<template>
  <div class="main">
    <div class="moreResultWrap">
      <div class="back">
        <!-- <go-back aa="../evaluation/resultDetails"></go-back> -->
        <headerBack></headerBack>
      </div>
      <div class="reuDelWrap">
        <scroller style="top: 0.8rem;">
          <div class="reuWrap">
            <div class="reuBoxs">
              <div class="reu1">
                <span>{{paths==='major'?'推荐专业结果':'推荐职位结果'}}</span>
              </div>
              <div>
                <div
                  class="botBox2 flex-h"
                  v-for="(item,$index) in delData"
                  :key="$index"
                  v-if="$index<3"
                  @click="jumpToDetail(item)"
                >
                  <span class="sp1">
                    <b></b>
                  </span>
                  <span class="flex1 sp2" v-if="paths==='major'">
                    <b>{{item?item.major:''}}</b>
                    <i>{{item?item.category:''}}</i>
                  </span>
                  <span class="flex1 sp2" v-if="paths==='jobs'">
                    <b style="line-height: 0.9rem;">{{item?item.position:''}}</b>
                  </span>
                  <span class="sp3">
                    <b :style="item.score<5.1?'color:#c5c5c5':''">{{item?item.score:''}}</b>
                    <img  src="~/static/iconsvgs/rightsy.png" alt />
                  </span>
                </div>
              </div>
            </div>
            <div class="lastlistBox">
              <div>
                <div
                  class="botBox2 flex-h"
                  v-for="(item,$index) in delData"
                  :key="$index"
                  v-if="$index>2"
                  @click="jumpToDetail(item)"
                >
                  <span class="sp1">
                    <b>{{$index+1}}</b>
                  </span>
                  <span class="flex1 sp2" v-if="paths==='major'">
                    <b>{{item.major?item.major:''}}</b>
                    <i>{{item.category?item.category:''}}</i>
                  </span>
                  <span class="flex1 sp2" v-if="paths==='jobs'">
                    <b style="line-height: 0.9rem;">{{item?item.position:''}}</b>
                  </span>
                  <span class="sp3">
                    <b :style="item.score<5.1?'color:#c5c5c5':''">{{item.score?item.score:''}}</b>
                    <img  src="~/static/iconsvgs/rightsy.png" alt />
                  </span>
                </div>
              </div>
            </div>
            <div style="width: 100%;height: 0.8rem;"></div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>
<script>
import ls from "store2";
import headerBack from "~/components/headerBack";
import reportList from "~/components/reportList";
import { getReportDetails } from "~/api/evaluation";
import { getmajorlistbyname } from "~/api/repository";
export default {
  head: {
    title: "生涯测评"
  },
  components: {
    headerBack,
    reportList
  },
  data() {
    return {
      delData: [],
      paths: ""
    };
  },
  created() {
    this.commonJs.gologins();
    this.paths = sessionStorage.getItem("resultQuery");
  },
  mounted: function() {
    this.showZhResultList();
    ls.set("preUrl", "../evaluation/moreResult");
  },

  watch: {},
  methods: {
    jumpToDetail(item) {
      if (this.paths === "major") {
        this.jumpToMajor("/professional/majorList", item.major);
      } else {
        this.$router.push({
          path: "/jobs/jobList",
          query: {
            jobName: item.position
          }
        });
      }
    },
    showZhResultList() {
      this.$vux.loading.show({
        text: "正在加载"
      });
      let ids = ls.get("zhId") * 1;
      getReportDetails(ids)
        .then(res => {
          if (res.code === "0") {
            if (this.paths === "major") {
              let majordata = res.data.majorScoreVo;
              if (majordata.length > 0) {
                this.delData = majordata;
              }
            } else if (this.paths === "jobs") {
              let majordata = res.data.positionScoreVo;
              if (majordata.length > 0) {
                this.delData = majordata;
              }
            }
          }
          this.$vux.loading.hide();
        })
        .catch(() => {
          this.$vux.loading.hide();
        });
    },
    jumpToMajor(routerName, queryData) {
      this.catalogName = this.$store.state.sendMsg;
      getmajorlistbyname({ catalog_name: queryData }).then(res => {
        if (res.code == 200) {
          const data = res.data[0];
          if (data) {
            let catalogData = {
              catalog_name: data.catalog_name,
              catalog_code: data.catalog_code,
              majors: data.majors
            };
            ls.set("catalogMsg", catalogData);
            ls.set("preUrlEvaluation", "../evaluation/moreResult");
            // this.$router.replace({ path: routerName });
             this.$router.push({ path: routerName+"?type="+data.catalog_name });
          } else {
            this.$vux.toast.text("抱歉该专业没有对应详情");
          }
        } else {
          this.$vux.toast.text("抱歉该专业没有对应详情");
        }
      });
    }
  },
  beforeDestroy() {}
};
</script>

<style scoped lang="less">
.moreResultWrap {
  width: 7.5rem;
  height: 100vh;
  background: #fff;

  .reuDelWrap {
    width: 7.5rem;
    height: auto;

    .reuWrap {
      width: 100%;
      height: auto;
      padding: 0.3rem 0.3rem 0;
      box-sizing: border-box;

      .reuBoxs {
        width: 100%;
        height: auto;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
        border-radius: 0.2rem;
        padding: 0.3rem 0.3rem 0.5rem;
        box-sizing: border-box;

        .reu1 {
          height: 1rem;
          line-height: 1rem;
          text-align: center;

          span {
            font-size: 0.4rem;
            font-weight: bold;
            color: rgba(34, 34, 34, 1);
          }
        }
      }
    }
  }

  .botBox2 {
    margin-top: 0.3rem;
    width: 100%;
    height: 1.5rem;
    border-radius: 0.1rem;
    padding: 0 0.2rem;

    .sp1 {
      width: 1rem;
      height: 1.5rem;
      overflow: hidden;

      b {
        width: 0.6rem;
        height: 0.6rem;
        display: block;
        margin-top: 0.45rem;
      }

      //
    }

    .sp2 {
      height: 1.5rem;
      padding: 0.3rem 0rem;
      box-sizing: border-box;

      b,
      i {
        display: block;
        height: 0.45rem;
        line-height: 0.45rem;
      }

      b {
        font-size: 0.3rem;
        font-weight: bold;
        color: rgba(34, 34, 34, 1);
      }

      i {
        // width: 78px;
        font-size: 0.26rem;
        font-weight: bold;
        color: rgba(187, 187, 187, 1);
      }
    }

    .sp3 {
      b {
        font-size: 0.4rem;
        vertical-align: middle;
        font-weight: 600;
        color: rgba(108, 191, 32, 1);
      }

      img {
        width: 0.3rem;
        height: auto;
        vertical-align: middle;
        margin-left: 0.05rem;
      }
    }
  }

  .reuBoxs {
    .botBox2:nth-of-type(1) {
      background: linear-gradient(
        270deg,
        rgba(255, 239, 174, 1) 0%,
        rgba(255, 252, 226, 1) 100%
      );

      .sp1 {
        b {
          background: url("~/static/iconsvgs/hg1.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .botBox2:nth-of-type(2) {
      background: linear-gradient(
        270deg,
        rgba(236, 244, 252, 1) 0%,
        rgba(246, 250, 254, 1) 100%
      );

      .sp1 {
        b {
          background: url("~/static/iconsvgs/hg2.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .botBox2:nth-of-type(3) {
      background: linear-gradient(
        270deg,
        rgba(251, 237, 219, 1) 0%,
        rgba(253, 248, 241, 1) 100%
      );

      .sp1 {
        b {
          background: url("~/static/iconsvgs/hg3.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .lastlistBox {
    .botBox2 {
      border-radius: 0;
      background: none;
      border-bottom: 1px solid #f2f2f2;
      padding: 0 0.3rem;
      box-sizing: border-box;

      .sp1 {
        b {
          border-radius: 50%;
          background: #fafafa;
          text-align: center;
          line-height: 0.6rem;
          font-size: 0.34rem;
          font-weight: 600;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
  }
}
</style>
